 <template #footer>
    <div>
        <!-- 猜你喜欢划线 -->
        <div class="line">
            <div class="left-line"></div>
            <p>&nbsp; · 更多商品 · &nbsp;</p>
            <div class="right-line"></div>
        </div>
        <!-- v-for="it in foodList" :key="it.id" -->
        <main class="userLike"> 
            <div class="main_container">
                <div class="likeProduct" v-for="item in likeList" :key="item.id">
                    <img :src="item.img" alt />
                    <p class="name">{{item.name}}</p>
                    <span>￥{{item.price}}</span>
                    <p class="type">{{item.subType}}</p>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
import { likeApi } from "../../apis/homeApi";
export default {
    data() {
        return {
            params: {
                //猜你喜欢请求参数
                type: "肉干果脯",
                page: 1,
                size: 4,
            },
            likeList: [],
            loading: false, //是否在加载中
            hasMore: true, //是否有更多文件
            total: "", //总页数
        };
    },
    created() {
        this.getLikeList(); //创建的时候请求第一次猜你喜欢数据
    },
    methods: {
        //猜你喜欢
        async getLikeList() {
            let result = await likeApi(this.params);
            this.total = result.total;
            if (this.likeList == []) {
                this.likeList = result.data;
            } else {
                this.likeList = [...this.likeList, ...result.data];
                this.loading = false
            }
        },
        //滚动屏幕事件
       /*  scrollEvt(e){
                let num = e.target.scrollHeight-e.target.scrollTop-e.target.clientHeight < 200
                debugger
                console.log(num);
                if(this.total <= this.params.page){
                    console.log(this.total)
                    this.hasMore = false
                }
                if(num && !this.loading && this.hasMore){
                    this.loading = true //设置状态为加载中
                    this.params.page++ //请求数据++
                    console.log(this.params);
                    this.getLikeList()
                }
            } */
    },
};
</script>

<style lang="less">
//引入全局样式
@import "@/style/index.less";
.line {
    margin: 8px 0;
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .left-line {
        width: 30%;
        height: 1px;
        border: 1px solid rgb(227, 227, 227);
        box-shadow: 0 0 10px rgb(239, 239, 239);
        border-radius: 2px;
    }
    .right-line {
        width: 30%;
        height: 1px;
        border: 1px solid rgb(227, 227, 227);
        box-shadow: 0 0 10px rgb(239, 239, 239);
        border-radius: 2px;
    }
    > p {
        margin: 0;
        padding:0;
        font-size: 16px;
        color: #000;
    }
}
.userLike {
    position: relative;
    display: block;
    margin: auto;
    width: 90%;
    > p {
        text-align: center;
        font-size: 0.7rem;
    }
    .main_container {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        div {
            width: 47%;
            margin-bottom: 20px;
            background: #f5f5f5;
            border-radius: 10px;
            img {
                width: 100%;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }
            .name {
                font-size: 0.8rem;
                font-weight: 700;
                display: -webkit-box;
                text-overflow: ellipsis;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; //当属性值为3，表示超出3行隐藏
                margin: 0;
            }
            span {
                color: #f40;
                line-height: 20px;
            }
            .type {
                margin: 5px;
                font-size: 0.7rem;
                color: gray;
            }
        }
    }
}
</style>